<template>
  <h5 class="-2mb">学校后台管理系统</h5>
  <!-- <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :router="true"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Stamp /></el-icon>
        <span>权限管理</span>
      </template>
      <el-menu-item index="/home/user">
        <el-icon><key /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="/home/role">
        <el-icon><User /></el-icon>
        <span>角色管理</span>
      </el-menu-item>
      <el-menu-item index="/home/menu">
        <el-icon><IconMenu /></el-icon>
        <span>菜单管理</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><UserFilled /></el-icon>
        <span>员工管理</span>
      </template>
      <el-menu-item index="2-1">
        <el-icon><List /></el-icon>
        <span>员工列表</span>
      </el-menu-item>
      <el-menu-item index="2-2">
        <el-icon><FolderAdd /></el-icon>
        <span>员工新增</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><HomeFilled /></el-icon>
        <span>部门管理</span>
      </template>
      <el-menu-item index="3-1">
        <el-icon><Fold /></el-icon>
        <span>部门列表</span>
      </el-menu-item>
      <el-menu-item index="3-2">
        <el-icon><Plus /></el-icon>
        <span>部门新增</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="4">
      <template #title>
        <el-icon><Timer /></el-icon>
        <span>考勤管理</span>
      </template>
      <el-menu-item index="4-1">
        <el-icon><Grid /></el-icon>
        <span>考勤列表</span>
      </el-menu-item>
      <el-menu-item index="4-2">
        <el-icon><Histogram /></el-icon>
        <span>导入考勤</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="5">
      <template #title>
        <el-icon><Money /></el-icon>
        <span>薪资管理</span>
      </template>
      <el-menu-item index="5-1">
        <el-icon><document /></el-icon>
        <span>薪资列表</span>
      </el-menu-item>
      <el-menu-item index="5-2">
        <el-icon><Printer /></el-icon>
        <span>导出报表</span>
      </el-menu-item>
    </el-sub-menu>

    <el-menu-item index="6">
      <el-icon><setting /></el-icon>
      <span>退出系统</span>
    </el-menu-item>
  </el-menu> -->

 <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :router="true"
  >
    <template v-for="item in menuList">
      <template v-if="item.children">
        <el-sub-menu :index="item.id" :key="item.id">
          <template #title>{{ item.name }}</template>
          <el-menu-item
            v-for="subItem in item.children"
            :index="subItem.path"
            :key="subItem.id"
          >
            {{ subItem.name }}
          </el-menu-item>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item :index="item.path" :key="item.id">
          {{ item.name }}
        </el-menu-item>
      </template>
    </template>
  </el-menu> 
</template>

<script  setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  User,
  Tools,
  Key,
  Avatar,
  UserFilled,
  List,
  FolderAdd,
  HomeFilled,
  Fold,
  Plus,
  Stamp,
  Timer,
  Histogram,
  Money,
  Printer,
  Grid,
} from '@element-plus/icons-vue'

import { ref,onMounted } from 'vue'
import {list} from '../../api/menu'

const menuList = ref([])

//2024/10/15
onMounted(async() => {
  let ps=await list()
  menuList.value=ps.data
  console.log(po.data)

})


const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<script setup>
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 180px;
}
</style>